<!DOCTYPE>
<html>

<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>

<body>
    <ul id="source">
        <li>北京空气质量：<b>90</b></li>
        <li>上海空气质量：<b>70</b></li>
        <li>天津空气质量：<b>80</b></li>
        <li>广州空气质量：<b>50</b></li>
        <li>深圳空气质量：<b>40</b></li>
        <li>福州空气质量：<b>32</b></li>
        <li>成都空气质量：<b>90</b></li>
    </ul>

    <ul id="resort">
        <!-- 
    <li>第一名：北京空气质量：<b>90</b></li>
    <li>第二名：北京空气质量：<b>90</b></li>
    <li>第三名：北京空气质量：<b>90</b></li>
     -->

    </ul>

    <button id="sort-btn">排序</button>

    <script type="text/javascript">
        /**
         * getData方法
         * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
         * 返回一个数组，格式见函数中示例
         */
        function getData() {
            var li = document.getElementById("source").getElementsByTagName("li");
            var data = [].map.call(li, function (value) {
                var index = value.innerText.indexOf("空气质量");
                var arr1 = value.innerText.slice(0, index);
                var arr2 = parseInt(value.getElementsByTagName("b")[0].innerText);
                return [arr1, arr2];

            });

            /*
            data = [
              ["北京", 90],
              ["北京", 90]
              ……
            ]
            */
            return data;
            // TODU: zhelyougewent
        }
        /**
         * sortAqiData
         * 按空气质量对data进行从小到大的排序
         * 返回一个排序后的数组
         */
        function sortAqiData(data) {
            var outputData = data.sort(function (a, b) {
                return a[1] - b[1];
            });
            return outputData;
        }

        /**
         * render
         * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
         * 格式见ul中的注释的部分
         */
        function render(data) {
            var pos = "一二三四五六七";
            var outputHTML = "";
            outputData.forEach(function (value, index) {
                outputHTML +=
                    "<li>第" +
                    pos.charAt(index) +
                    "名：" +
                    value[0] +
                    "，" +
                    value[1] +
                    "</li>";
            });
            document.getElementById("aqi-list").innerHTML = outputHTML;

        }

        function btnHandle() {
            var aqiData = getData();
            aqiData = sortAqiData(aqiData);
            render(aqiData);
        }


        function init() {
            document.getElementById("sort-btn").click(btnHandle());
            // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

        }
        init();
    </script>
</body>

</html>